<template>
  <div class='table'>
    <ul>
      <li v-for="(item, index) in data" :key="index">
        <span><el-checkbox v-model="item.checked"></el-checkbox></span>
        <span>{{item.time}}</span>
        <span>{{item.start}}</span>
        <span class="white-space" :title="item.content">{{item.content}}</span>
        <span>
          <span class="color-red" @click="operate(item,'0')">删除</span>
          <span v-if="item.sta==0" class="color-blue" @click="operate(item,'1')">标记为已读</span>
          <span v-else-if="item.sta==1">已读</span>
        </span>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props:["data"],
  components: {},
  name: "",
  data() {
    return {};
  },
  methods: {
    operate(info,sta){
      let url = sta=='0'?"message/del":"message/save"
      var params={id:[info.id]}
      _g.apiPost(url,params).then(res=>{
        _g.toastMsg(res.code?"error":"success",res.msg)
        if(!res.code)this.$emit("flash")
      })
    }
  },
  created() {}
};
</script>
<style scoped>
.table {
}
li{
  font-size: 14px;
  color: #333;
  display: flex;
  padding: 10px 0;
}
li>span:nth-of-type(1){
  width: 60px;
  text-align: center;
}
li>span:nth-of-type(2){
  width: 150px;
}
li>span:nth-of-type(3){
  width: 100px;
  text-align: center;
}
li>span:nth-of-type(4){
  width: 100px;
  flex: 1;
}
li>span:nth-of-type(5){
  width: 120px;
  font-size: 12px;
  display: flex;
  justify-content: space-around;

}
.color-red{
  color: red;
  cursor: pointer;
}
.color-blue{
  color: #3f9ce2;
  cursor: pointer;
}
</style>